<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索到的记录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 图标 -->
    <script src="../css/iconfont.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- bootstrap -->
    <script src="../js/jquery-3.2.1.js"></script>
    <!-- jquery.form.js -->
    <script src="../js/jquery.form.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <script src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/serachbook.css">

</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top ">
        <div class="container-fluid bgcolor ">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header ">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" style="border: none"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://120.78.75.213:8080/books/showUser" style="color: white">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tushu"></use>
                    </svg>&nbsp; Books_Jt</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <div class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" id="searchString" class="form-control" onkeydown="keyupEnter(event)"
                                    placeholder="Search">
                            </div>
                            <button type="button" onclick="searchAllBooks(1)" class="btn btn-success">Search</button>
                        </div>

                    </li>
                    <li>
                        <a href="./shoppingBooks.html" target="_blank">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gouwuche"></use>
                            </svg>&nbsp; 购物车</a>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-user"></use>
                            </svg>&nbsp;
                            你好！
                            <span id="userVV" style=" font-size: 20px;color: rgb(255, 136, 0);font-weight: bold;display: none">\/</span>
                            <span id="userID">用户</span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a data-toggle="modal" data-target="#mySetting">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-setting-fill"></use>
                                    </svg>&nbsp;设置</a>
                            </li>
                            <li>
                                <a href="../html/collectionbooks.html" target="_blank">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-alert"></use>
                                    </svg> &nbsp;收藏
                                </a>
                            </li>
                            <li>
                                <a href="../html/myshare.html" target="_blank">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-reddit"></use>
                                    </svg> &nbsp;成为会员
                                </a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li>
                                <a href="http://120.78.75.213:8080/books/index">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-logout"></use>
                                    </svg>&nbsp;注销</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container" style="padding-top: 60px;background-color: white;border-radius: 5px;padding-bottom: 20px">
        <ol class="breadcrumb">
            <li>
                <a href="http://120.78.75.213:8080/books/showUser">
                    首页
                </a>
            </li>
            <li class="active">搜索</li>
        </ol>

        <div class="container-fluid" id="serachBooks">
            <div class="serachBox">
                <h3 style="margin-top:0">搜索到的记录:</h3>
                <h4 v-if="serachBookData == '搜索数据为空'">{{serachBookData}}.....</h4>
                <el-collapse v-model="activeName" v-if="serachBookData != '搜索数据为空'  " accordion>
                    <el-collapse-item v-for="(sb_items,index) in serachBookData" :title="(index+1)+'.'+'书名:'+sb_items.bookname"
                        :name="index+1">
                        <a @click="jumpbook(sb_items.kindid,sb_items.id)">
                            <div><span> 发布人: {{sb_items.manage}}</span> <span style="padding-left: 20px">发布时间:
                                    {{sb_items.altertime}}</span> </div>
                            <div class="bookslist">
                                <img :src="sb_items.bookimg" width="64" height="64" alt="图片">
                                <p>书籍简介: &nbsp;&nbsp;{{sb_items.bookintro}} </p>
                            </div>
                        </a>

                    </el-collapse-item>
                </el-collapse>

            </div>
        </div>


    </div>
    <!-- Modal -->
    <div class="modal fade" id="mySetting" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">个人信息修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="http://120.78.75.213:8080/books/uphtmlUsers" method="post">
                        <div class="form-group">
                            <label for="usernameInput" class="col-sm-2 control-label">Username:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="usernameInput" placeholder="用户名" name="usernameInput1"
                                    required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="passwordInput" class="col-sm-2 control-label">Password:</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="passwordInput" name="passwordInput1"
                                    placeholder="密码" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="textareaInput" class="col-sm-2 control-label">备注:</label>
                            <div class=" col-sm-10">
                                <textarea class="form-control" name="remarkInput1"></textarea>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../js/getfunction.js"></script>
<script>
    var serachBooks = new Vue({
        el: "#serachBooks",
        data() {
            return {
                activeName: 1,
                serachBookData: ""
            }
        },
        methods: {

            jumpbook: function (kindid, id) {
                sessionStorage.setItem("id_book", id);
                sessionStorage.setItem("kindid_book", kindid);
                window.open("./onebook.html");
            }
        },
        created: function () {
            let _vm = this;
            let data = sessionStorage.getItem("searchData");
            $.ajax({
                url: "http://120.78.75.213:8080/books/findAllBooksData",
                data: {
                    findbook: data
                },
                success: function (e) {
                    if (e.length == 0) {
                        _vm.serachBookData = "搜索数据为空";
                    } else {
                        if (e.length > 100) {
                            alert("搜索数量过多，只显示前50条！");
                            e = e.slice(0, 50);
                        }
                        _vm.serachBookData = e;
                    }
                },
                error: function (e) {
                    console.log(e)
                }
            })
        }
    })

    document.getElementById('userID').innerText = sessionStorage.getItem('username');
    $('#usernameInput').val(sessionStorage.getItem('username'));
    $(document).ready(function () {
        $.ajax({
            url: "http://120.78.75.213:8080/books/memberIf",
            method: "POST",
            async: false,
            success: function (e) {
                // console.log(e.userPor[0].ifMember)
                if (e.userPor[0].ifMember == 1) {

                    document.getElementById("userVV").style.display = "inline"
                }
            },
            error: function (err) {
                alert(err + "错误");
            }
        });
    })
</script>

</html>